<template>
  <div>
    <!--导入用户信息数据-->
    <el-upload
      :show-file-list="false"
      :before-upload="beforeUpload"
      :on-success="onSuccess"
      :on-error="onError"
      :disabled="importDataDisabled"
      style="display: inline-flex;margin-right: 8px"
      action="/dev-api/product/user/import">
      <!--导入数据-->
      <el-button :disabled="importDataDisabled" type="success" :icon="importDataBtnIcon">
        {{importDataBtnText}}
      </el-button>
    </el-upload>
    <el-button type="success" @click="exportEasyExcel" icon="el-icon-download">
      导出用户信息数据
    </el-button>
    <el-row type="flex" justify="start" align="middle">
      <el-col :span="3">
        <el-upload
          style="width: 600px"
          action="/dev-api/product/user/import"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :file-list="fileList">
          <el-button type="primary"  size="small">导入sku信息</el-button>
        </el-upload>
      </el-col>
      <el-col :span="3">
        <el-button @click="downloadSkuInfo()" type="primary" size="small" >导出sku信息</el-button>
      </el-col>
    </el-row>




    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="skuId" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.skuId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="spuId" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.spuId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品标题" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.skuTitle }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品价格" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column label="分类名称" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.catalogName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="品牌名称" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.brandName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="销量" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.saleCount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="selectSkuId(scope.row)">商品详情</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="updStatic(scope.row)">下架商品</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="text" @click="findStock()">设置库存</el-button>
    <el-dialog title="设置库存" :visible.sync="dialogFormVisible">
      <el-form :model="wareSkuStock">
        <el-form-item label="skuId" :label-width="formLabelWidth">
          <el-input v-model="wareSkuStock.skuId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="库存值" :label-width="formLabelWidth">
          <el-input v-model="wareSkuStock.stock" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addStock()">确 定</el-button>
      </div>
    </el-dialog>
    <el-button type="text" @click="addProduct()">上架商品</el-button>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
  import axios from 'axios'
import {addStock, deleteSkuId, downloads, exportExcel} from "../../../api/product/product/product";
import {findSearch} from "../../../api/product/product/search";
import {Message} from "element-ui";

  export default {
    //import引入的组件需要注入到对象中才能使用"
    components: {},
    props: {},
    data() {
      //这里存放数据"

      return {
        //导入
        importDataBtnText: '导入数据',
        importDataBtnIcon: 'el-icon-upload2',
        importDataDisabled: false,
        dialogFormVisible: false,
        formLabelWidth: '120px',
        // 文件数量
        fileList: [],
        tableData:[],
        wareSkuStock:{
            skuId:null,
            stock:null
        },
      };
    },
    //计算属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {
      //设置库存
      findStock(){
       this. dialogFormVisible = true
      },
      addStock(){
        addStock(this.wareSkuStock).then(res=>{
          this.$message.success("设置成功");
          this.dialogFormVisible = false;
        })
      },
      //导入模版
      onError(res) {
        this.importDataBtnText = '导入数据';
        this.importDataBtnIcon = 'el-icon-upload2';
        this.importDataDisabled = false;
        console.log(res);
      },
      onSuccess(res) {
        this.importDataBtnText = '导入数据';
        this.importDataBtnIcon = 'el-icon-upload2';
        this.importDataDisabled = false;
        console.log(res.msg);
        if (res.msg == '文件导入成功'){
          Message.success("文件导入完成")
        }
        // this.initEmps();
      },
      beforeUpload() {
        this.importDataBtnText = '正在导入';
        this.importDataBtnIcon = 'el-icon-loading';
        this.importDataDisabled = true;
      },
      //导出
      exportEasyExcel() {
        exportExcel().then(res=>{
          this.$message.success("导出成功");
        })
      },
      // exportExcelTemplate(){
      //   window.open('/employee/excel/exporttemplate', '_parent');
      // },
      //上架商品
      addProduct(){
        this.$router.push({
          name: '录入商品'
        })
      },

      //查看商品详细信息
      selectSkuId(row){
         this.$router.push({
           name: '商品详情页',
           params: {
             skuId: row.skuId
           }
         })
      },
      //下架商品
      updStatic(row){
        deleteSkuId(row.spuId).then(res=>{
          this.$message.success(res.msg);
          this.getData();
        })
      },
      //商品列表
      getData(){
        findSearch().then(res=>{
          this.tableData = res.data.skuVoList;
        })
      },
      downloadSkuInfo(){
        downloads().then(res=>{
          this.$message.success(res.msg);
          })
      },
      // 文件列表移除文件时的钩子
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      // 点击文件列表中已上传的文件时的钩子
      handlePreview(file) {
        console.log(file);
      },
      // 限制上传文件的个数和定义超出限制时的行为
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      // 文件列表移除文件时之前的钩子
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`);
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
      this.getData();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style scoped>

</style>
